<template>
  <div>
    <n-form ref="formRef" :model="model">
      <n-form-item path="content" :rule="[{ required: true, message: '请输入描述！' }]">
        <n-input
          v-model:value="model.content"
          type="textarea"
          :maxlength="500"
          show-count
          :autosize="{
            minRows: 5,
          }"
        />
      </n-form-item>
      <n-form-item path="refFileDtoList" label="附件" label-placement="left">
        <FileUpload v-model="model.refFileDtoList" />
      </n-form-item>
      <n-flex justify="end" class="mb-10">
        <n-button color="#0A56D8FF" :loading="submitFlag" @click="onValidate">提交</n-button>
      </n-flex>
    </n-form>
    <div class="h-1 bg-#e7eaf0"></div>
  </div>
</template>
<script setup lang="jsx">
defineOptions({ name: 'RecordForm' })
const props = defineProps({
  addApi: {
    type: Function,
    default: () => Promise.resolve(1),
  },
})
const emits = defineEmits(['add'])
const formMold = () => ({
  content: '',
  refFileDtoList: [],
})
const model = ref(formMold())
const submitFlag = ref(false)
const formRef = ref(null)
function onValidate(e) {
  e.preventDefault()
  formRef.value.validate(async (errors) => {
    if (!errors) {
      submitFlag.value = true
      const params = model.value
      props
        .addApi(params)
        .then(() => {
          $message.success('添加记录成功！')
          emits('add')
        })
        .catch((err) => {
          console.log('err:', err)
          $message.success('添加记录失败！')
        })
        .finally(() => {
          submitFlag.value = false
          model.value = formMold()
        })
    }
  })
}
</script>
<style lang="scss" scoped></style>
